<template>
  <div>
    <!--头部-->
    <div style="box-shadow: 0 2px 4px rgba(0,0,0,.08)">
      <div class="front-header">
        <a href="/front/home">
          <div class="front-header-left">
            <img src="@/assets/imgs/logo.png" alt="">
            <div class="title">文艺共鸣</div>
          </div>
        </a>
        <div class="front-header-center">
          <div @click="changePath(item.path)" class="menu-item" v-for="item in menus"
               :key="item.text" :class="{'menu-item-active' : item.path === $route.path }">{{ item.text }}
          </div>
        </div>

        <div style="margin-left: 10px">
          <el-popover
              placement="bottom"
              width="475"
              ref="popover"
              trigger="focus"
              :visible-arrow="false"
              style="padding-top: 0"
              v-model="visible">
            <div class="search-content">
              <div class="search-his" v-show="recentSearch.length > 0">
                <div>
                  <span class="title">搜索历史</span>
                  <span class="clear" @click="clearHistory"><i class="el-icon-circle-close"></i>清空</span>
                </div>
                <el-tag
                    v-for="tag in recentSearch"
                    :key="tag.searchInfo"
                    size="small"
                    closable
                    style="margin-right: 10px; margin-top: 10px; cursor: pointer"
                    @click="handleSearchTag(tag)"
                    @close="handleDelete(tag)"
                    >
                  {{ tag.searchInfo }}
                </el-tag>
              </div>

              <div :class="'search-hot ' + (hotSearch.length > 0 ? 'mt' : '') ">
                <span class="title">热门搜索</span>
                <ul class="hot-list">
                  <li v-for="(item, index) in hotSearch" :key="index" class="hot-item">
              <span v-if="index < 3" class="top">
                <img src="@/assets/imgs/hot_fill.png" alt="" style="width: 20px;">
              </span>
                    <span v-else>
                {{ index + 1 }}
              </span>
                    <span @click="handleSearch(item)">{{ item.value.name }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-popover>
          <el-input v-model="searchKeyword" style="width: 300px; margin-right: 10px; margin-left: 10px"
                    placeholder="请输入关键字"
                    clearable
                    v-popover:popover
                    @keyup.enter.native="search">
            <el-select v-model="selectedValue" slot="prepend" placeholder="请选择" style="width: 100px">
              <el-option label="文艺作品" value="文艺作品"></el-option>
              <el-option label="交流笔记" value="交流笔记"></el-option>
            </el-select>
          </el-input>
          <el-button @click="search"
                     style="background-color: #f59300;margin-left: 5px; border-color: #f59300; color: #fff"
                     icon="el-icon-search">搜索
          </el-button>
        </div>
        <div class="front-header-right">
          <div v-if="!user.username">
            <el-button @click="$router.push('/login')">登录</el-button>
            <el-button @click="$router.push('/register')">注册</el-button>
          </div>
          <div v-else>
            <el-dropdown>
              <div class="front-header-dropdown">
                <img :src="user.avatar" alt="">
                <div style="margin-left: 10px">
                  <span>{{ user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
                </div>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <a style="color: #333" href="/front/person">
                    <div>个人中心</div>
                  </a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a style="color: #333" href="/front/userWorks">
                    <div>我的作品</div>
                  </a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a style="color: #333" href="/front/userNotebook">
                    <div>我的笔记</div>
                  </a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-badge class="badge" :value="unread.length" :max="10" style="cursor: pointer" @click="clickRead">
                    <a style="color: #333" href="/front/messages">
                      <div>消息通知</div>
                    </a>
                  </el-badge>
                </el-dropdown-item>

                <el-dropdown-item>
                  <div @click="logout">退出</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <!--主体-->
    <div class="main-body">
      <router-view ref="child" @update:user="updateUser"/>
    </div>
  </div>
</template>

<script>

export default {
  name: "FrontLayout",

  data() {
    return {
      top: '',
      notice: [],
      unread: [],
      visible: false,
      isMouseOver: false,
      recentSearch: [],
      hotSearch:[],
      user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
      menus: [
        // {text: '首页', path: '/front/home'},
        {text: '作品', path: '/front/works'},
        {text: '笔记', path: '/front/notebook'},
        {text: '聊天室', path: '/front/im'},
      ],
      searchKeyword: '',
      selectedValue: '文艺作品', // 用于存储当前选择的值
    }
  },

  mounted() {
    this.getUnRead()
    this.loadRecentSearch()
    this.loadHotSearch()
  },
  methods: {
    handleSearch(item) {
      this.searchKeyword = item.value.name
      this.selectedValue=item.value.module
      this.search()
    },
    handleSearchTag(item){
      this.searchKeyword=item.searchInfo
      this.selectedValue=item.esmodules
      this.search()
    },
    clearHistory() {   // 删除所有
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/search/removeRecentSearchList').then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('删除成功')
            this.loadRecentSearch()
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleDelete(tag){
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/search/removeRecentSearch',{
          params:{
            searchInfo:tag.searchInfo,
            userId:this.user.id,
            module:tag.module
          }
          }).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('删除成功')
            this.loadRecentSearch()
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    search() {
      if (this.selectedValue === '文艺作品') {
        this.searchWork()
      } else {
        this.searchNotebook()
      }
      this.loadRecentSearch()
    },
    searchWork() {
      window.open('/front/works?searchKeyword=' + this.searchKeyword)
    },
    searchNotebook() {
      window.open('/front/notebook?searchKeyword=' + this.searchKeyword)
    },
    changePath(path) {
      location.href = path
    },
    updateUser() {
      this.user = JSON.parse(localStorage.getItem('xm-user') || '{}')   // 重新获取下用户的最新信息
    },
    // 退出登录
    logout() {
      localStorage.removeItem("xm-user");
      this.$message.success("登出成功!")
      this.$router.push("/login");
    },
    getUnRead() {
      this.$request.get('/messages/unread').then(res => {
        this.unread = res.data
      })
    },
    clickRead() {
      this.$router.push('/front/messages?t=' + new Date().getTime())
    },
    loadRecentSearch() {
      this.$request.get('/search/listRecentSearch').then(res => {
        this.recentSearch = res.data
      })
    },
    loadHotSearch(){
      this.$request.get('/search/listHotSearch').then(res=>{
        this.hotSearch=res.data
      })
    }
  }
}
</script>

<style scoped>
@import "@/assets/css/front.css";

.menu-item {
  height: 50%;
  display: flex;
  align-items: center;
  margin-right: 30px;
  font-size: 16px;
  cursor: pointer;
}

.menu-item:hover {
  color: #a1c4fd;
  font-weight: bold;
}

.menu-item-active {
  color: #a1c4fd;
  font-weight: bold;
  border-bottom: 3px solid #a1c4fd;
}

.search-content span.title {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
}

.search-content .search-his span.clear {
  float: right;
  cursor: pointer;
}

.search-content .search-his span.clear:hover {
  color: #00aeec;
}

.search-content .mt {
  margin-top: 10px;
}

.search-content .search-hot {
  width: 100%;
}

.search-content .search-hot ul.hot-list {
  width: 100%;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  margin-top: 5px;
  list-style: none;
}

.search-content .search-hot ul.hot-list li.hot-item {
  width: 50%;
  height: 30px;
  font-size: 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}

.search-content .search-hot ul.hot-list li.hot-item span:first-child {
  width: 10%;
  color: #999999;
  text-align: center;
  display: inline-block;
}

.search-content .search-hot ul.hot-list li.hot-item span:last-child {
  margin-left: 5px;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-content .search-hot ul.hot-list li.hot-item span.top {
  color: #EA322BFF;
}

.search-content .search-hot ul.hot-list li.hot-item:hover {
  background-color: #f2f2f2;
}
</style>